<template>
  <div class="container">
    <!-- 白色卡片 -->

    <el-card>
      <!-- logo -->
      <img class="logo" src="../../assets/logo.png" alt="" />
      <!-- 表单-->
      <el-form ref="form" :model="form" :rules="rules" status-icon>
        <el-form-item prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="form.code" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox :value="true"
            >我已阅读并同意「用户协议」和「隐私条款」</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginFn()">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import auth from "@/utils/auth"
export default {
  name: "LoginPage",
  data() {
    const checkMobile = (rule, value, callback) => {
      //\d 只能写数字 \D不能写数字 匹配所有。\s 是匹配所有空白符，包括换行，\S 非空白符，不包括换行。
      // \w 匹配字母、数字、下划线。等价于 [A-Za-z0-9_]  \W反之
      if (/^1[3-9]\d{9}$/.test(value)) {
        callback();
      } else {
        callback(new Error("手机号格式不对哦!"));
      }
    };
    return {
      //表单数据对象
      form: {
        mobile: "",
        code: "",
      },
      //表单校验规则对象
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          { validator: checkMobile, trigger: "blur" },
        ],
        code: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          { len: 6, message: "验证码是6位字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    loginFn() {
      //通过el-form自己的实例调用validate函数进行这个题校验
      this.$refs.form.validate(async (valid) => {
        //console.log(valid);
        if (valid) {
         // console.log('通过校验');
          try {
            //进行登录请求
            const res = await this.$http.post(
              "./v1_0/authorizations",
              this.form
            );
             //console.log('请求结束');                                                                      
            //保存到token到本地
           // localStorage.setItem("geek-client-pc-token", res.data.data.token);
             auth.setToken(res.data.data.token)
            //跳转到首页
            this.$router.push("./");
          } catch (e) {
            //失败
            this.$message.error(e.response.data.message || "登录失败T.T");
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../assets/login.png) no-repeat center / cover;
  .el-card {
    width: 440px;
    height: 380px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    .logo {
      width: 200px;
      display: block;
      margin: 0 auto 20px;
    }
  }
  .el-form {
    padding: 0 20px;
    .el-button {
      width: 100%;
    }
  }
}
</style>